import React from 'react';
import {Form, Input, Select, DatePicker, Button, Space} from "antd";
import './index.less'
const {RangePicker} = DatePicker
const { Option } = Select;
interface propsType{
    username: string;
    phoneNum: number;
    email: string;
    subscripte_type: string;
    startDate:string,
    endDate:string,
}
function SearchForm(props) {
    const [searchForm] = Form.useForm<propsType>(props.row);
    const toAdd = () => {
        props.add()
    }
    const toQuery = () => {
        let value = searchForm.getFieldsValue()
        props.toSearch(value)
    }
    const reStore = () => {
        searchForm.resetFields()
    }
    return (
        <Form
            form={searchForm}
            labelCol={{span: 6, offset: 0}}
            wrapperCol={{ flex: 4 }}
            layout="inline"
        >
            <Form.Item label="用户名:" name="username">
                <Input />
            </Form.Item>
            <Form.Item label="手机号:" name="phoneNum">
                <Input />
            </Form.Item>
            <Form.Item label="邮箱:" name="email">
                <Input  />
            </Form.Item>
            <Form.Item wrapperCol={{flex: 4}}>
                <Space>
                    <Button onClick={reStore}>
                        重置
                    </Button>
                    <Button className="successBtn" onClick={toAdd}>
                       新增
                    </Button>
                    <Button type="primary" onClick={toQuery}>
                        查询
                    </Button>
                </Space>
            </Form.Item>
        </Form>
    );
}

export default SearchForm;
